<template>
  <view class="machineManage">
    <pagehead>划拨</pagehead>
    <view class="machineManage-belong">
      <view class="left">
        <view class="">激活奖励</view>
        <view class="p">终端激活的归属</view>
      </view>
      <view class="tab">
        <view v-for="(item,index) in tabList" :key="index"
        :class="[currentIndex == index ? 'active' : '', 'tab-item']" @tap.stop="changeTab(index,item)">{{item.name}}</view>
      </view>
    </view>
    <!-- 我的机具 -->
    <view class="typePage">
      <template>
        <!-- <scroll-view scroll-y class="typePage-left">
          <view v-for="(item, index) in flist" :key="item.id" :data-id="item.id" class="typePage-left__item b-b"
            :class="[index === tabActiveIndex ? 'active' : '']" @tap="tabtap(item, index)">
            <text>{{ item.name }}</text>
          </view>
        </scroll-view> -->
        <scroll-view scroll-y class="typePage-right" scroll-with-animation="true" :scroll-into-view="tabActiveText"
          @scrolltolower="lower" v-if="isShowPage">
          <view class="" :id="'item-' + tabActiveIndex">
            <view class="typeName-sort">
              <view>全选 
                <image v-if="isAll" @tap.stop="chooseAll" class="ico" :src="IMAGE_STATIC + '/images/radio-checked.png'" mode="aspectFill"/>
                <image v-else @tap.stop="chooseAll" class="ico" :src="IMAGE_STATIC + '/images/radio1.png'" mode="aspectFill"/>
              </view>
              <view class="btn" @tap.stop="submit">划拨</view>
            </view>
            <view class="typePage-right__list">
              <!--  -->
              <view v-for="(item, index) in categoryLowList" :key="item.id" class="typePage-right__item"
                 v-if="categoryLowList.length != 0">
                 <view class="left">
                  <image v-if="item.isChecked" @tap.stop="chooseItem(item)" class="ico" :src="IMAGE_STATIC + '/images/radio-checked.png'" mode="aspectFill"/>
                  <image v-else @tap.stop="chooseItem(item)" class="ico" :src="IMAGE_STATIC + '/images/radio1.png'" mode="aspectFill"/>
                </view>
                <view class="right">
                  <view class="name">机具编号
                  </view>
                  <view class="num">{{item.sn_code}}<text class="red"></text></view>
                </view>
              </view>
              <view class="initNoData" v-if="categoryLowList.length == 0"></view>
            </view>
          </view>
        </scroll-view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      IMAGE_STATIC: this.$url.assetsPath, // 静态图片地址
      total: 0,
      lastId: '',
      flist: [
        // { id: 1, cateName: '龙腾版' },
        // { id: 2, cateName: '龙腾版' },
        // { id: 3, cateName: '龙腾版' },
        // { id: 4, cateName: '龙腾版' },
        // { id: 5, cateName: '龙腾版' },
        // { id: 6, cateName: '龙腾版' },
      ],
      categoryLowList: [
        // { id: 1, no: '000006026202', status: 1, },
        // { id: 2, no: '000006026202', status: 1, },
        // { id: 3, no: '000006026202', status: 0, },
        // { id: 4, no: '000006026202', status: 1, },
        // { id: 5, no: '000006026202', status: 1, },
        // { id: 6, no: '000006026202', status: 1, },
      ],
      isShowPage: true,
      lsShow: false,
      // 弹窗
      currentIndex:-1,
      modelSortShow: false,
      chooseObj:{
        status:'0' //0-否 1-是
      },
      isAll:false, // 全选
      chooseList:[],
      tabActiveIndex:0,
      tabActiveText:'',
      tabActive:'',
      orderId:'',
      pos_name_id:'',
      currentIndex:0,
      belongType:0,
      tabList:[
        {name:'自己',status:0},
        {name:'伙伴',status:1},
        ],
    };
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log('refresh');
    this.init();
    this.isLoadShow = true;
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onReachBottom() {
    console.log("分页");
    if (this.lsShow == true) {
      this.getGoodsList();
    } else {
      // return this.$tools.toast('到底了');
    }
  },
  onLoad(options) {
    if(options){
      this.orderId = options.value1
      this.pos_name_id = options.value2
    }
    this.init()
  },
  onShow() {
  },
  methods: {
    init() {
      this.total = 0;
      this.lastId = '';
      this.isShowPage = false;
      this.flist = [];
      this.categoryLowList = []
      this.getGoodsList()
      // this.getCategoryOneList()
    },
    // 分类列表
    getCategoryOneList() {
      var data = {
        is_active:this.chooseObj.status,
      };
      this.$Ajax('/api/system/posName/getSysPosNameList', data, res => {
        if (res.success) {
          this.flist = res.data.sysPosNameList;
          this.tabActiveIndex = 0;
          this.tabActive = res.data.sysPosNameList[0].id;
          this.tabActiveText = 'item-' + this.tabActive;
          this.getTotal()
          this.getGoodsList();
        }
      }, err => {
      }
      )
    },
    // 获取总数
    getTotal(){
      var data = {
        pos_name_id: this.tabActive, // 类型编号
      };
      this.$Ajax('/api/user/machinery/getUserMachineryTotal', data, res => {
        if (res.success) {
          this.total = res.data.userMachineryTotal.merchant_num
        }
      }, err => {
      }
      )
    },
    // 数据
    getGoodsList() {
      let that = this;
      var data = {
        pos_name_id: this.pos_name_id, // 类型编号
        is_active:this.chooseObj.status,
        last_id:this.lastId
      };
      console.log("data", data);
      uni.showLoading({
        mask: true
      })
      this.$Ajax('/api/user/machinery/getUserMachineryList', data, res => {
        uni.hideLoading();
        this.isShowPage = true;
        this.categoryLowList = this.categoryLowList.concat(res.data.userMachineryList);
        this.categoryLowList.forEach(item=>{
          this.$set(item,'isChecked',false)
        })
        if(res.data.userMachineryList.length>0){
          this.lastId = res.data.userMachineryList[res.data.userMachineryList.length-1].id
          this.lsShow = true
        }else{
          this.lsShow = false
        }
      }, err => {
        uni.hideLoading();
      }
      );
    },
    // 全选
    chooseAll(){
      this.isAll = !this.isAll
      if(this.isAll){
        this.chooseList = []
        this.categoryLowList.forEach(item => {
          this.$set(item,'isChecked',true)
          this.chooseList.push(item.sn_code)
        });
      }else{
        this.categoryLowList.forEach(item => {
          this.$set(item,'isChecked',false)
        });
        this.chooseList = []
      }
      console.log('chooseList',this.chooseList) 
    },
    // 单选
    chooseItem(item){
      this.$nextTick(()=>{
      if(item.isChecked){
        this.$set(item,'isChecked',false)
        const index = this.chooseList.findIndex(key=>key == item.sn_code)
        console.log('index',index)
        this.chooseList.splice(index,1)
        this.isAll = false
      }else{
        this.$set(item,'isChecked',true)
        this.chooseList.push(item.sn_code)
        if(this.chooseList.length == this.categoryLowList.length){
          this.isAll = true
        }
      }
      console.log('isAll',this.isAll) 
      console.log('chooseList',this.chooseList) 
    })
    },
    submit(){
      let that = this;
      if(this.chooseList.length<=0){
        return this.$tools.toast("请选择机具");
      }
      var data = {
        order_id: this.orderId, // 类型编号
        sn_code_list:(this.chooseList).join(','),
        is_transfer_reward:this.belongType,
      };
      console.log("data", data);
      uni.showLoading({
        mask: true
      })
      this.$Ajax('/api/seller/productOrder/transferProductOrder', data, res => {
        uni.hideLoading();
        if (res.success) {
          that.$tools.toastBack(res.msg, 1);
          this.init()
        }
      }, err => {
        uni.hideLoading();
      }
      );
    },
    //一级分类点击
    tabtap(item, index) {
      if (this.tabActive != index) {
        this.tabActive = item.id;
        this.tabActiveText = 'item-' + item.id;
        this.tabActiveIndex = index;
        this.isShowPage = false;
        this.lastId = ''
        this.categoryLowList = []
        this.getGoodsList();
      }
    },
     // 切换
    changeTab(index,item){
      if(this.currentIndex != index){
        this.currentIndex = index
        this.belongType = item.status
        console.log("belongType", this.belongType);
      }
    },
    // 重置
    reset(){
      this.currentIndex = -1
      this.chooseObj={  // 筛选条件
        status:'', // 认证状态
      }
    },
    // 确定
    sure(){
      this.total = 0;
      this.pageIndex = 1;
      this.pageSize = 10;
      this.isShowPage = false;
      this.categoryLowList = []
      this.modelSortShow = false
      this.getGoodsList();
    },
    lower() {
      console.log("分页", this.lsShow);
      if (this.lsShow == true) {
        this.getGoodsList();
      } else {
        // return this.$tools.toast('到底了');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.machineManage {
  position: relative;
  min-height: 100vh;
  overflow-y: auto;
  &-belong{
    @include flexBetween;
    overflow: hidden;
    width: 93.6%;
    margin: auto;
    background: #fff;
    margin-top: 20rpx;
    padding: 12rpx 24rpx;
    font-size: 28rpx;
    color: #AD2926;
    .p{
      color: #666;
      font-size: 12px;
    }
    .tab {
       @include flexLeft;
       flex-wrap: wrap;
       background: #FFFFFF;
       margin-top: 20rpx;
 
       .tab-item {
        //  width: 220rpx;
        padding: 0 40rpx;
         text-align: center;
         height: 80rpx;
         line-height: 80rpx;
         font-size: 28rpx;
         color: #666;
         background: #F3F4F9;
         border-radius: 8rpx;
         margin-left: 24rpx;
       }
 
       .active {
         border: 2rpx solid #AD2926;
         color: #AD2926;
         font-weight: 500;
       }
       .tab-item:nth-of-type(1){
        margin-left: 0;
       }
     }
  }
  .typePage {
    display: flex;
    position: relative;

    &-left {
      width: 220rpx;
      background: #fff;
      height: 100vh;
      padding: 0 16rpx;

      &__item {
        text-align: center;
        height: 96rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        border-bottom: 1px solid rgba(51, 51, 51, 0.1);
        @include flexCenterColumn;
      }
      &__item:last-of-type{
          border-bottom: none;
        }
      &__item.active {
        color: #D1242A;
        background: #F4F4F4;
      }
    }

    &-right {
      width: 100%;
      margin: 20rpx;

      .typeName-sort {
        @include flexBetween;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
        line-height: 48rpx;
        position: relative;

        .ico {
          width: 40rpx;
          height: 40rpx;
          display: inline-block;
          vertical-align: middle;
          margin-left: 10rpx;
        }
        .btn {
          width: 100rpx;
          text-align: center;
          height: 40rpx;
          line-height: 40rpx;
          background: #AD2926;
          border-radius: 1998rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }

      &__item {
        width: 100%;
        background: #fff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        border: 2rpx solid rgba(51, 51, 51, 0.1);
        padding: 38rpx 20rpx;
        margin-top: 20rpx;
        @include flexLeft;

        .name {
          @include flexLeft;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          line-height: 48rpx;
        }

        .ico {
          width: 40rpx;
          height: 40rpx;
          display: inline-block;
          vertical-align: middle;
          margin-left: 16rpx;
        }
        .right{
          margin-left: 20rpx;
        }

        .num {
          font-size: 24rpx;
          color: #666666;
          line-height: 28rpx;
          margin-top: 8rpx;
        }

        .img {
          width: 64rpx;
          height: 64rpx;
          border-radius: 100%;
        }

        .status {
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;
          line-height: 48rpx;
        }

        .no-status {
          color: #AD2926;
        }

        .btn {
          margin-top: 8rpx;
          width: 100rpx;
          text-align: center;
          height: 40rpx;
          line-height: 40rpx;
          background: #AD2926;
          border-radius: 1998rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
    }
  }
}
.model-bg{
  top: calc(88rpx );
  /* #ifdef MP-WEIXIN */
  top: calc(88rpx  + var(--status-bar-height));
  /* #endif */
  left: 0;
  height: 100%;
  transform: translateY(1px);
  .modal{
    height: 100%;
  }
}
</style>
